<template>
  <div class="ke-opencourse-catalogue">
    <ul class="infinite-list" style="overflow:auto">
      <li
        v-for="(item, index) in catalogue"
        class="infinite-list-item"
        :key="index"
        @click="handleChangeCourse(index)"
      >{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'keOpencourseCatalogue',
  data() {
    return {
      courseSrc: {},
      catalogue: []
    }
  },
  mounted() {
    this.getCourseSrc()
  },
  methods: {
    getCourseSrc() {
      this.courseSrc = this.$store.state.courseSrc.courseSrc
      let couseList = this.courseSrc.src

      for (let i = 0; i < couseList.length; i++) {
        let arr = couseList[i].split('/')
        this.catalogue.push(arr[arr.length - 1])
      }
    },
    handleChangeCourse(index) {
      this.$bus.emit('changeCourse', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-opencourse-catalogue {
  width: 830px;

  .infinite-list {
    padding-left: 0px;
    height: 300px;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      width: 0px;
      /* height: 4px; */
    }

    li {
      list-style: none;
      height: 40px;
      line-height: 40px;
      fong-size: 14px;
      background-color: red;
      padding-left: 20px;
      box-sizing: border-box;
      color: #555555;
      cursor: pointer;

      &:nth-child(2n) {
        background-color: #eeeeee;
      }

      &:nth-child(2n - 1) {
        background-color: #ffffff;
      }
    }
  }
}
</style>
